import { Component, OnInit, Input, EventEmitter } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { DISPLAY_STRATEGY_REPLACE } from "tab-list";
import { StockTopBarService, StockComponent, TOP_BAR_TYPE_CHART, ACTION_SET_BAR_TYPE, ACTION_GO_NEXT, ACTION_GO_PRE } from "stock";
import { ChartTypes } from "kchart";

const CATE_TIME_SERIES = 0,
  CATE_K = 1,
  CATE_MULTIPLE = 2;

export interface CHART_TAB {
  text?: string;
  textStrategy?: string | number;
  children?: CHART_TAB[];
  cate?: string | number;
  abstract?: boolean;
  duration?: number;
  period?: string;
  key?: number | symbol;
  innerHTML?: string;
  canControlFromOuter?: boolean;
};

export const CHART_TAB_LIST: CHART_TAB[] = [
  {
    text: "分时",
    textStrategy: DISPLAY_STRATEGY_REPLACE,
    abstract: true,
    canControlFromOuter: true,
    children: [
      {
        cate: CATE_TIME_SERIES,
        text: "1日分时",
        duration: 1,
        key: 1
      },
      {
        cate: CATE_TIME_SERIES,
        text: "2日分时",
        duration: 2,
        key: 2
      },
      {
        cate: CATE_TIME_SERIES,
        text: "3日分时",
        duration: 3,
        key: 3
      },
      {
        cate: CATE_TIME_SERIES,
        text: "4日分时",
        duration: 4,
        key: 4
      },
      {
        cate: CATE_TIME_SERIES,
        text: "5日分时",
        duration: 5,
        key: 5
      },
    ]
  },
  /*
  {
    cate: CATE_K,
    period: "Sec15",
    text: "15秒",
  },
  {
    cate: CATE_K,
    period: "Sec30",
    text: "30秒"
  },
  */
  {
    cate: CATE_K,
    period: "Min1",
    text: "1分"
  },
  {
    cate: CATE_K,
    period: "Min5",
    text: "5分"
  },
  {
    cate: CATE_K,
    period: "Min15",
    text: "15分"
  },
  {
    cate: CATE_K,
    period: "Min30",
    text: "30分"
  },
  {
     cate: CATE_K,
     period: "Min60",
     text: "60分"
  },
  {
    cate: CATE_K,
    period: "Day1",
    text: "日"
  },
  {
    cate: CATE_K,
    period: "Day7",
    text: "周"
  },
  {
    cate: CATE_K,
    period: "Day30",
    text: "月"
  },
  {
    cate: CATE_MULTIPLE,
    text: "九宫格",
    innerHTML: `<i class="iconfont icon-suolvetu" style="font-size: 20px"></i>`
  },
];

const TS_CHART_KEY = {
  "ArrowUp": "ArrowUp",
  "ArrowDown": "ArrowDown"
};


export interface ZytgSwitcher {
  text: string;
  key: string;
  selected?: boolean;
  isShow: boolean;
  disabled?: boolean;
  isMain: boolean;
}

export interface KchartSwitcher {
  key: string;
  forbid?: string;
  selected?: boolean;
  masterOf?: string;
  slaveOf?: string;
  isMain?: boolean;
}

const SWITCHER_LIST: KchartSwitcher[] = [
  {
    key: ChartTypes.MA,
    forbid: ChartTypes.BOLL,
    selected: true,
    isMain: true,
  },
  {
    key: ChartTypes.VOL,
    masterOf: ChartTypes.MA_VOL,
    selected: true,
  },
  {
    key: ChartTypes.MA_VOL,
    slaveOf: ChartTypes.VOL,
    selected: true,
  },
  {
    key: ChartTypes.MACD,
    // selected: false,
  },
  {
    key: ChartTypes.RSI,
  },
  {
    key: ChartTypes.KDJ,
  },
  {
    key: ChartTypes.BOLL,
    forbid: ChartTypes.MA,
    isMain: true,
  },
  {
    key: ChartTypes.VMACD,
  },
  {
    key: ChartTypes.WR,
  },
];

@Component({
  // moduleId: module.id,
  selector: "stock-chart",
  templateUrl: "stock-chart.component.html",
  styleUrls: [
    "stock-chart.component.less"
  ]
})
export class StockChartComponent implements OnInit {
  stockSource;
  currentConfig;
  lists: any = [ChartTypes.MA, ChartTypes.VOL, ChartTypes.MA_VOL];
  // zytgList = []; // 众赢投顾新指标
  switcherList = SWITCHER_LIST;
  normalChartConfig = {
    // scrollBar: false, // 是否显示底部滑动条
    // cursorInteract: false, // 是否允许光标交互
    // dragZoom: false, // 是否允许拖拽与缩放
    // settingBtn: false, // 是否显示设置按钮
    // title: false // 是否显示股票名称
  };
  nineChartConfig = {
    mode: 1, // 默认模式0 九宫格模式1
    // theme: 0, // 默认白色颜色主题0
    scrollBar: false, // 是否显示底部滑动条
    cursorInteract: false, // 是否允许光标交互
    // dragZoom: false, // 是否允许拖拽与缩放
    settingBtn: false, // 是否显示设置按钮
    title: false // 是否显示股票名称
  };
  removeSub = new EventEmitter();

  constructor(private router: ActivatedRoute, private topBar: StockTopBarService) { }

  ngOnInit() {
    // this.lists = [...this.lists];
    // this.zytgList = this.topBar.zytgList;
    // this.router.params.forEach((params) => {
      // console.log(params)
      // let todoId = +params['id']; // 使用+将字符串类型的参数转换成数字
      // this.selectedTodo = this.todoService.getTodoById(todoId);
    // });

    this.stockSource =
      this.router.parent.params.map(params => params["id"]).filter(id => !!id).map(id => {
        return {
          symbol: (<string>id).replace("_", ".")
        };
      });
    let that = this;
    setTimeout(function(){
      that.topBar.source.next({
        type: ACTION_SET_BAR_TYPE,
        tabType: TOP_BAR_TYPE_CHART,
        payload: CHART_TAB_LIST
      });
    });
    this.topBar.output.subscribe(
      tab =>
        this.currentConfig = tab,
      err =>
        console.error("TOPBAR ERROR: ", err)
    );
  }

  updateSwitchers(lists) {
    this.lists = lists;
    this.switcherList = this.switcherList.map(switcher =>
      lists.indexOf(switcher.key) !== -1 ?
        Object.assign({}, switcher, { selected: true }) :
        Object.assign({}, switcher, { selected: false }));
    // console.debug("UpdateSwitchers: ", this.switcherList, lists);
    return;
  }

  removeSwitcher(type) {
    this.removeSub.next(type.data);
  }

  // handleKeydown(e) {
  //   switch (e.key) {
  //     case TS_CHART_KEY.ArrowUp:
  //       this.topBar.source.next({
  //         type: ACTION_GO_PRE
  //       });
  //       break;
  //     case TS_CHART_KEY.ArrowDown:
  //       this.topBar.source.next({
  //         type: ACTION_GO_NEXT
  //       });
  //       break;
  //   }
  // }
}